<html>
	<style>
		body {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
				'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
			color: #444;
			font-size: 11px;
			width: 200px;
			padding-top: 24px;
			margin: 0;
			background-color: #f8f9fa;
			user-select: none;
		}
		.welcome {
			font-weight: 500;
			margin: 16px 0;
		}
		a {
			color: #4a63ea;
			text-decoration: none;
			margin-bottom: 8px;
		}
		#api-docs {
			display: none;
		}
		.dev-mode-section {
			border-top: 1px solid #efefef;
			margin-top: 16px;
			padding: 8px 16px;
			width: 100%;
			display: flex;
			align-items: center;
		}
		.devMode-label {
			flex: 1;
			margin-left: 16px;
			line-height: 12px;
		}
		.switch {
			position: relative;
			display: inline-block;
			width: 33px;
			height: 18px;
			margin-right: 16px;
		}
		.switch input {
			opacity: 0;
			width: 0;
			height: 0;
		}
		.switch input:focus,
		.switch input:active {
			outline: none;
		}
		.slider {
			position: absolute;
			cursor: pointer;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			-webkit-transition: all 0.1s ease-out;
			transition: all 0.1s ease-out;
			border: 1px solid #444;
			border-radius: 18px;
		}

		.slider:before {
			position: absolute;
			content: '';
			width: 18px;
			height: 18px;
			box-sizing: border-box;
			background-color: white;
			-webkit-transition: all 0.1s ease-out;
			transition: all 0.1s ease-out;
			border: 1px solid #444;
			left: -1px;
			bottom: -1px;
			border-radius: 50%;
		}

		input:checked + .slider {
			background-color: #444;
		}

		input:checked + .slider:before {
			-webkit-transform: translateX(15px);
			-ms-transform: translateX(15px);
			transform: translateX(15px);
		}
	</style>
	<body>
		<img src="figmaPlus.png" width="40" height="40" />
		<div class="welcome">Welcome to Figma Plus</div>
		<a target="_blank" href="https://docs.figmaplus.com/#/userGuide/manager">User Guide</a>
		<a target="_blank" href="https://docs.figmaplus.com/#/developerGuide/gettingStarted">Developer Guide</a>
		<a id="api-docs" target="_blank" href="https://docs.figmaplus.com/#/api/ui">API Documentation</a>
		<a target="_blank" href="https://figmaplus.com/">Download Desktop App</a>
		<div class="dev-mode-section">
			<span class="devMode-label">Developer Mode</span>
			<label class="switch">
				<input id="devMode" type="checkbox" />
				<span class="slider"></span>
			</label>
		</div>
		<script src="popup.js"></script>
	</body>
</html>
